<template>
	<view class="container gray_bg my_section">
		<view :class="{'header-container': true, 'isFixed': myData.isScorllFlag}">
    			<view :style="{height: myData.statusBarHeight + 'px' }"></view>
    			<view class="h-title" :style="{height: myData.navHeight + 'px'}" @click="selectMerchant">
    				<tm-icon fontSize="32" name="iconfont icon-zukeduan-zuhu"></tm-icon>
    				<text class="tit">{{zkInfo.merchant_name}}</text>
            <tm-icon fontSize="32" name="iconfont tmicon-angle-down" color="#4A76F7"></tm-icon>
    			</view>
    	</view>
		<tm-sheet :margin="[20]" :round="3" :shadow="0" color="#F7FBFF">
			<view class="static_content">
				<view class="static_top">
					<view class="static_top_left">
						<view class="static_img">
              <image width="80" height="80" src="@/static/img/default-header.png"></image>
            </view>
						<view class="static_info">
							<view class="static_info_title">{{zkInfo.merchant_name}}</view>
							<view class="static_info_con">
								<view><text class="static_text">{{zkInfo.real_name}}</text><text v-if="zkInfo.position_name">({{zkInfo.position_name}})</text></view>
								<view class="info_phone">{{zkInfo.phone}}</view>
							</view>
						</view>
					</view>
					<view class="static_set" @click="gotoSetpage">
            <tm-icon fontSize="40" name="iconfont icon-zukeduan-shezhi"></tm-icon>
          </view>
				</view>
				<view class="static_bottom">
					<view v-for="(item,i) in staticData" :key="i" class="statci_num_item">
						<view class="static_bottom_num">{{item.num}}<text class="static_bottom_unit">{{item.unit}}</text></view>
						<view class="static_bottom_label">{{item.label}}</view>
					</view>
				</view>
			</view>
		</tm-sheet>
		<view v-for="item in menuList" :key="item.id">
			<tm-sheet :margin="[20]" :round="3" :shadow="2">
			
				<block-title :content="item.name" :styleObj="{padding: '0 0 10px'}"></block-title>
				<icon-section :iconList="item.menu_list"></icon-section>
			</tm-sheet>
		</view>
		<tm-picker
			:columns="merchantList"
			map-key="merchant_name"
			v-model:model-str="show.pickerStr"
			v-model:show="showPicker"
			:default-value="show.pickerIndex"
			v-model="show.pickerIndex"
			@confirm="switchMerchant"
		>
		  <template v-slot:default="{val}">
			<tm-sheet :margin="[20]" :round="3" :shadow="2" color="#FAFAFA">
			  <tm-radio-group v-model="radioValue">
				<tm-radio v-for="(item, i) in merchantList" :key="item.merchant_id" outlined :value="item.merchant_id" :label="vv ">
				  <template v-slot:default="{checked}">
					<view class="flex flex-row">
					  <tm-text label="我已经阅读并同意"></tm-text>
					  <view >
						<tm-text   color="primary" label="《合作协议》"></tm-text>
					  </view>
					</view>
				  </template>
				</tm-radio>
			  </tm-radio-group>
			</tm-sheet>
		  </template>
    </tm-picker>
<!--    底部划出组件 -->

<!--     background-color="#fff"-->
    <uni-popup ref="popupRef" type="bottom" >
		<view class="popup_header">
			<view class="popup_header_title">
        切换租客（共{{merchantList.length}}家）
      </view>
			<view class="popup_close" @click="closePopup">×</view>
		</view>
		<view class="popup-content">

          <tm-radio-group v-model="popValue" direction="col">
            <view v-for="(item, i) in merchantList" :key="i" class="radio_section">
              <tm-radio  _class="['pop_tm_radio']" @change="(val) => changeRadio(val,item)" :value="item.merchant_id">
                <template v-slot:default="{checked}">

                    <view class="radio_item">
                      <view class="radio_title">{{item.merchant_name}}</view>
                      <view class="radio_sub_title">
                        {{item.community_name}}
                      </view>
                    </view>

                </template>
              </tm-radio>
            </view>

          </tm-radio-group>

		</view>
		<view class="popup_footer">
			<view class="popup_footer_inner">
				<tm-button block label="确认" round="25" @click="handleSelect"></tm-button>
			</view>
		</view>
	</uni-popup>
	<tabbar :currentVal="2"></tabbar>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'

	import { storeToRefs } from 'pinia'
	import { useInfoStore } from '@/store/userInfo'
	import {getService, getStatic,getZkInfo, getMerchantList} from '@/api_request/api'
	import tabbar from "@/components/tab-bar/tab-bar.vue";
	import { onPageScroll } from '@dcloudio/uni-app'

	// const headUrl = require('@/static/img/default-header.png')

  const pickerRef = ref<any>(null)
  const popupRef = ref<any>(null)

	const userStore = useInfoStore()
	//  统计数据
	const staticData = ref<any>([])
	const myData = ref<any>({
		height: 0,
		statusBarHeight: 48, //自定义的顶部栏高度
		navHeight: 44,
		isScorllFlag: false
	})

	const showPicker = ref<boolean>(false)
  const radioValue = ref('')
	const show = ref({
		time: '',
		radio: '', //bonaer
		pickerIndex: [1],
		pickerStr: '',
		checkbox: [],
		rate: 0,
		slider: [0, 50],
		segtab: '',
		switch: 'hehe',
		upload: [],
		city: [],
		cityStr: '',
		nameuser: {
			a: '测试'
		},
		testff: [],
		ha: false
	})
	//  其他菜单
	const menuList = ref<any>([])
  const { userInfo } : any = storeToRefs(userStore)
  const merchant_id = ref<any>(userInfo.value.merchant_id  || 12)
  const zkInfo = ref<any>({})
  const popValue = ref<any>(merchant_id)
  //  租户列表
  const merchantList = ref<any>([])
  //  滚动事件
  onPageScroll((e:any) =>{
  	if(e.scrollTop > 0) {
  		myData.isScorllFlag = true
  	}else {
  		myData.isScorllFlag = false
  	}
  })
  const getInitData = async() => {
	  const results:any[] = await Promise.all([getService({menu_nav: 'my'}), getStatic({merchant_id: merchant_id.value}), getZkInfo({merchant_id: merchant_id.value}), getMerchantList({})])
	  console.log('jp===results', results)
	  menuList.value = results[0].data
	  const sData = results[1].data
	  staticData.value = [
	    {unit: '人', num: sData.user_count, label: '人员数量'},
	    {unit: '次', num: sData.repair_count, label: '故障报修'},
	    {unit: '次', num: sData.activity_count, label: '已报名活动'},
	    {unit: '次', num: sData.train_count, label: '已学习课程'},
	  ]
	  zkInfo.value = results[2].data?.userInfo
	  merchantList.value = results[3].data || []

  }
  
  getInitData()
  const switchMerchant = (item) => {
  }
  const selectMerchant = (val: any) =>{
    popupRef.value.open('bottom')
  }
  const closePopup = () => {
    popupRef.value.close()
  }
  // 选择
  const handleSelect = () => {
    merchant_id.value = popValue.value
    closePopup()
  //   更新数据
    getInitData()
  }

  const changeRadio = (val, item) => {
    popValue.value = item.merchant_id
  }
  const gotoSetpage = () => {
	  uni.navigateTo({
	  	url: '/subpkg/systemset/systemset'
	  })
  }


</script>

<style lang="scss" scoped>
  .tit{
    padding-right: 6px;
  }
  .static_img{
	  width: 50px;
	  height: 50px;
	  image{
		width: 100%;
		height: 100%;
	  }
	}
	.static_top{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		font-size: $cus-font-size-12;
		.static_top_left {
			display: flex;
			.static_info {
				padding-left: 8px;
			}
		}
		.static_info_title{
			font-size: $cus-font-size-16;
			color: $cus-color-2;
      padding-bottom: 8px;
		}
		.static_text{
			color: $cus-color-2;
		}
		.static_info_con{
			display: flex;
      .info_phone{
        padding-left: 10px;
        color: $cus-color-2;
      }
		}
	}
	.static_info_title{
		color: $cus-color-2;
	}


	.static_bottom{
		display:flex;
		justify-content: space-between;
		align-items: center;
    padding-top: 16px;
		.statci_num_item{
			text-align: center;
		}
		.static_bottom_num{
			color: $cus-color-2;
			font-size: $cus-font-size-14;
			.static_bottom_unit{
				font-size: $cus-font-size-12;
			}
		}
		.static_bottom_label{
			font-size: $cus-font-size-12;
			color: $cus-color-1;
		}
	}

</style>